<template>
  <div id="content">
    <ul class="foodList">
      <Foods
      v-for="item in foodsList"
      :key="item.id"
      :name="item.dish_name"
      :foodPrice="item.price"
      :introduce="item.introduce"
      :img="item.pic"
      :recommend="''"
      :rate="item.recommend_rate"
      >
      </Foods>
    </ul>
  </div>
</template>

<script>
import Foods from '@/components/Foods/foods.vue'
import { getDishInfoAPI } from '@/api/dishInfoAPI.js'
export default {
  props: ['cateName'],
  components: {
    Foods
  },
  data () {
    return {
      foodsList: [],
      avltimer: null
    }
  },
  methods: {
    async getCurrentDishes () {
      const token = localStorage.getItem('token')
      const { data: res } = await getDishInfoAPI(token)
      this.foodsList = res.data.filter(item => item.cate_name === this.cateName)
    }
  },
  created () {
    this.avltimer = setInterval(() => {
      this.getCurrentDishes()
    }, 50)
  },
  beforeDestroy () {
    clearInterval(this.avltimer)
    this.avltimer = null
  }
}
</script>

<style scoped>
#content{
    position: fixed;
    top: 80px;
    right: 20px;
    bottom: 20px;
    left: 300px;
    background: rgba(255, 255, 255, .2);

    box-sizing: border-box;
    padding: 10px;

    overflow: hidden;
}

/* .foodList{
    font-size: 0;
} */

</style>
